<template>
  <div class="margin_30">
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <!-- card body -->
      <div>
        <h4 style="display:inline-block; margin-right:10px;">订单信息:</h4>
        <el-tag v-if="info.status === 0" size="small" type="danger" effect="dark">
          待处理
        </el-tag>
        <el-tag v-else-if="info.status === 1" size="small" type="warning" effect="dark">
          退货中
        </el-tag>
        <el-tag v-else-if="info.status === 2" size="small" type="" effect="dark">
          已完成
        </el-tag>
        <el-tag v-else-if="info.status === 3" size="small" type="info" effect="dark">
          已拒绝
        </el-tag>
      </div>
      <el-row :gutter="20">
        <el-col :span="6" :offset="0"><p>订单编号:<span>{{ info.orderSn }}</span></p></el-col>
        <el-col :span="6" :offset="0"><p>退单人姓名:<span>{{ info.returnName }}</span></p></el-col>
        <el-col :span="6" :offset="0"><p>退单理由:<span>{{ info.reason }}</span></p></el-col>
        <el-col :span="6" :offset="0"><p>退单描述:<span>{{ info.description }}</span></p></el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6" :offset="0"><p>申请时间:<span>{{ info.createTime }}</span></p></el-col>
      </el-row>
      <el-divider />
      <h4>退货商品:</h4>
      <el-table :data="productList" border stripe>
        <el-table-column
          label="商品图片"
          width=""
          align="center"
        >
          <template v-slot="scope">
            <img width="100" height="100" :src="scope.row.productPic" alt="">
          </template>
        </el-table-column>
        <el-table-column
          label="商品描述"
          width=""
          align="center"
        >
          <template v-slot="scope">
            <div>{{ scope.row.productName }}</div>
            <div>品牌: {{ scope.row.productBrand }}</div>
          </template>
        </el-table-column>
        <el-table-column
          prop="productRealPrice"
          label="商品价格"
          width=""
          align="center"
        />
        <el-table-column
          prop="productAttr"
          label="商品属性"
          width="180"
          align="center"
        >
          <template v-slot="scope">
            <div>
              <div v-for="(item,index) in scope.row.productAttr" :key="index">
                <span>{{ item.key }}:</span>
                <span>{{ item.value }}</span>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="productCount"
          label="商品数量"
          width=""
          align="center"
        />
        <el-table-column
          fixed="right"
          label="总计"
          width=""
          align="center"
        >
          <template v-slot="scope">
            <span>{{ scope.row.productCount * scope.row.productRealPrice }}</span>
          </template>
        </el-table-column>
      </el-table>
      <h4>用户信息:</h4>
      <el-row :gutter="20">
        <el-col :span="6" :offset="0"><p>联系人:<span>{{ info.memberUsername }}</span></p></el-col>
        <el-col :span="6" :offset="0"><p>联系电话:<span>{{ info.returnPhone }}</span></p></el-col>
      </el-row>
      <el-divider />
      <h4>费用信息:</h4>
      <el-row :gutter="20">
        <el-col :span="6" :offset="0"><p>退单金额:<span style="color:red;">{{ info.returnAmount }}</span></p></el-col>
        <el-col :span="6" :offset="0"><p>运费金额:<span style="color:red;">0</span></p></el-col>
      </el-row>
      <el-form v-if="info.status === 0" style="margin-top:30px" :inline="true" :model="returnForm" class="demo-form-inline">
        <el-row :gutter="20">
          <el-col :span="6" :offset="0">
            <el-form-item label="退款金额">
              <el-input-number v-model="returnForm.returnAmount" size="small" />
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="0">
            <el-form-item label="处理人">
              <el-input v-model="returnForm.handleMan" placeholder="" size="small" />
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="0">
            <el-form-item label="处理备注">
              <el-input v-model="returnForm.handleNote" placeholder="" size="small" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="3" :offset="9">
            <el-form-item>
              <el-button type="primary" style="width:150px;" size="small" @click="agree">同意退款</el-button>
            </el-form-item>
          </el-col>
          <el-col :span="12" :offset="0">
            <el-form-item>
              <el-button size="small" style="width:150px;" @click="refuse">拒绝退款</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div v-if="info.status !== 0">
        <el-divider />
        <h4>处理结果:</h4>
        <el-row :gutter="20">
          <el-col :span="6" :offset="0"><p>处理人:<span>{{ info.handleMan }}</span></p></el-col>
          <el-col :span="6" :offset="0"><p>处理备注:<span>{{ info.handleNote }}</span></p></el-col>
          <el-col :span="12" :offset="0"><p>处理时间:<span>{{ info.handleTime }}</span></p></el-col>
        </el-row>
      </div>
      <div v-if="info.status === 2">
        <el-divider />
        <h4>收货信息:</h4>
        <el-row :gutter="20">
          <el-col :span="6" :offset="0"><p>退单收货人:<span>{{ info.receiveMan }}</span></p></el-col>
          <el-col :span="6" :offset="0"><p>退单收货备注:<span>{{ info.receiveNote }}</span></p></el-col>
          <el-col :span="12" :offset="0"><p>退单收货时间:<span>{{ info.receiveTime }}</span></p></el-col>
        </el-row>
      </div>
      <el-form v-if="info.status === 1" style="margin-top:30px" :inline="true" :model="overForm" class="demo-form-inline">
        <el-row :gutter="20">
          <el-col :span="6" :offset="0">
            <el-form-item label="收货人">
              <el-input v-model="overForm.handleMan" placeholder="" size="small" />
            </el-form-item>
          </el-col>
          <el-col :span="6" :offset="0">
            <el-form-item label="收货备注">
              <el-input v-model="overForm.handleNote" placeholder="" size="small" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="3" :offset="9">
            <el-form-item>
              <el-button type="primary" style="width:150px;" size="small" @click="confirm">确认收货</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

    </el-card>
  </div>
</template>

<script>
import {
  orderReturn,
  agreeApply,
  rejectApply,
  receiveProduct

} from '@/api/order/back'
export default {
  name: 'VueAdminTemplateMasterIndex',

  data() {
    return {
      info: {},
      productList: [],
      returnForm: {
        id: this.$route.params.id,
        handleMan: '',
        handleNote: '',
        returnAmount: ''
      },
      overForm: {
        id: this.$route.params.id,
        receiveMan: '',
        receiveNote: ''
      }
    }
  },

  created() {
    this.init()
  },

  mounted() {

  },

  methods: {
    init() {
      orderReturn(this.$route.params.id)
        .then(res => {
          console.log(res)
          res.data.orderReturnApply.productAttr = JSON.parse(res.data.orderReturnApply.productAttr)
          this.info = res.data.orderReturnApply
          this.productList.push(this.info)
        })
    },
    // 同意退款
    agree() {
      agreeApply(this.$route.params.id, this.returnForm)
        .then(res => {
          this.init()
          this.productList = []
        })
    },
    // 拒绝退款
    refuse() {
      rejectApply(this.$route.params.id, this.returnForm)
        .then(res => {
          this.init()
          this.productList = []
        })
    },
    // 确认收货
    confirm() {
      receiveProduct(this.$route.params.id, this.overForm)
        .then(res => {
          this.init()
          this.productList = []
        })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
